import Taro, { Component } from '@tarojs/taro'
import { View, Button, Input, Image } from '@tarojs/components'
import { AtModal, AtModalContent, AtModalAction, AtToast } from "taro-ui"
import { post } from '../../service/api'
import './index.scss'

class AddCare extends Component {
  constructor() {
    super(...arguments)
    this.state = {
      isShowModal: false,
      isShowToast: false,
      msg: '',
      cardNum: ''
    }
  }
  config = {
    navigationBarTitleText: '添加卡片',
  }
  handleSave() {
    const { cardNum } = this.state;
    if (!cardNum.length) {
      this.pop('卡号不能为空');
      return
    } else {
      this.setState({
        isShowModal: true
      })
    }
  }
  pop(msg) {
    this.setState({
      isShowToast: true,
      msg: msg
    }, () => {
      setTimeout(() => {
        this.setState({
          isShowToast: false
        })
      }, 1500)
    })
  }
  cardNum(e) {
    this.setState({
      cardNum: e.detail.value,
    })
  }
  async onConfirm() {
    this.setState({
      isShowModal: false
    })
    const { cardNum } = this.state;
    const { data } = await post('vipCard/binding', {
      vipCode: cardNum
    })
    if (data.code == 0) {
      this.pop(data.msg)
    }
    if (data.code == -1) {
      this.pop(data.msg)
    }

    // Taro.switchTab({
    //   url: "/pages/mine/index"
    //   // 加杠绝对路径
    // })
  }
  onCancel() {
    this.setState({
      isShowModal: false
    })

  }
  render() {
    const { isShowToast, msg, isShowModal, cardNum } = this.state;
    return (
      <View className='addcare'>
        <View className="input-box">
          <Image className="img" src={require('../../asset/imgs/ckh.png')} />
          <Input className="care-num" value={cardNum} onInput={this.cardNum} maxLength='7' placeholder="请输入卡号" />
        </View>
        <Button className="save-btn" onClick={this.handleSave.bind(this)}>保存</Button>
        <AtModal isOpened={isShowModal}>
          <AtModalContent>
            <View className="modal-title">提示</View>
            <View className="modal-content">是否确认添加该卡片？</View>
          </AtModalContent>
          <AtModalAction>
            <Button className="cancel" onClick={this.onCancel.bind(this)}>取消添加</Button>
            <Button className="confirm" onClick={this.onConfirm.bind(this)}>继续添加</Button>
          </AtModalAction>
        </AtModal>
        <AtToast
          isOpened={isShowToast}
          text={msg}
          duration={2000}
        ></AtToast>
      </View>
    )
  }
}

export default AddCare